<template>
  <view class="replacePhone">
    <view class="list">
      <input style="font-size: 32rpx" v-model="form.phone" placeholder="请输入新手机号" placeholder-style="color:#999" />
      <view></view>
    </view>
    <view class="list">
      <input style="font-size: 32rpx" v-model="form.code" placeholder="请输入验证码" placeholder-style="color:#999" />
      <view style="margin-bottom: 10rpx">
        <span class="color3FA" v-if="time == 0" @click="getyzm">获取验证码</span>
        <span v-else class="color999">{{ time }}s</span>
      </view>
    </view>
    <view class="list margintop50">
      <my-button borderRadius="8" height="96" hoverClass="none" width="670" @click="nextstep">
        完成
      </my-button>
    </view>
  </view>
</template>

<script>
import { updateUserPhone, sendPhoneCode } from '../../api/index.js'
import MyButton from "@/chronicDisease/components/my-button/my-button.vue";
export default {
  components: {
    MyButton
  },
  data() {
    return {
      form: {
        phone: "",
        type: 2,//1:登录2:修改手机号
        code: '',//验证码
      },

      time: 0
    }
  },
  methods: {
    //获取验证码
    getyzm() {
      if (!this.phoneFun(this.form.phone)) {
        this.$toast('请输入正确的手机号')
        return
      }
      this.time = 60
      sendPhoneCode(this.form).then(res => {
        if (res.code == 200) {
          this.$toast('已发送验证码，请注意查收')
        }
      })
      var interval = setInterval(() => {
        this.time--
        if (this.time == 0) {
          clearInterval(interval)
        }
      }, 1000)
    },
    //修改手机号
    nextstep() {
      if (!this.phoneFun(this.form.phone)) {
        this.$toast('请输入正确的手机号')
        return
      }
      if (!this.form.code) {
        this.$toast('请输入验证码')
        return
      }
      updateUserPhone(this.form).then(res => {
        if (res.code == 200) {
          this.$toast('修改成功')
          uni.clearStorageSync()
          uni.reLaunch({
            url: '../login/login'
          })
        }
      })
    },
  }
}
</script>

<style lang="scss">
.replacePhone {
  .list {
    margin: 20rpx 40rpx;
    display: flex;
    font-size: 32rpx;
    justify-content: space-between;
    align-items: center;
    height: 84rpx;
    border-bottom: 2rpx solid #d4d4d4;
  }

  .margintop50 {
    margin-top: 100rpx;
  }
}
</style>
